﻿@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>


<div style="padding:5px 0;">
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

</div>


<table id="table" class="table table-striped table-sm table-hover">
    <thead class="thead-dark">
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

@section Scripts {

    @*<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
        <script src="~/Scripts/bootstrap-table.js"></script>
        <script src="~/Scripts/locales/bootstrap-table-zh-CN.js"></script>*@
    @*<script src="~/Scripts/plugin/popper.js"></script>*@

    <script type="text/javascript">
        var $table = $('#table')

        $(function () {
            $('[data-toggle="popover"]').popover();
            $('[data-toggle="tooltip"]').tooltip();
        });

        $(function () {
            var data = [
                {
                    'id': 0,
                    'name': 'Item 0',
                    'price': '$0'
                },
                {
                    'id': 1,
                    'name': 'Item 1',
                    'price': '$1'
                },
                {
                    'id': 2,
                    'name': 'Item 2',
                    'price': '$2'
                },
                {
                    'id': 3,
                    'name': 'Item 3',
                    'price': '$3'
                },
                {
                    'id': 4,
                    'name': 'Item 4',
                    'price': '$4'
                },
                {
                    'id': 5,
                    'name': 'Item 5',
                    'price': '$5'
                }
            ]
            $table.bootstrapTable({ data: data })

            //$table.bootstrapTable('refreshOptions', {
            //    theadClasses: "thead-dark"
            //});
        })


    </script>

}

